<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title></title>
    <link rel="stylesheet" href="css/app.css" />
    <style>
      .title {
        margin-bottom: 10px;
      }

      .container {
        padding: 10px;
      }
    </style>
  </head>

  <body style="background-color: #fff">
    <div class="app-header">
      <div class="app-header-title">app框架UI组件</div>
    </div>

    <div class="app-main">
      <div class="container">
        <div class="app-title">文本框</div>
        <input type="text" />

        <div class="app-title">密码框</div>
        <div class="app-password-wrapper">
          <input type="password" id="passwordInput" />
          <span
            class="app-password-toggle app-icon app-password-eye-icon"
          ></span>
        </div>

        <div class="title">数字框</div>
        <input type="number" />

        <div class="title">搜索框</div>
        <input type="search" />

        <div class="title">按钮</div>
        <button class="app-btn">默认按钮</button>
        <button class="app-btn-primary">主要按钮</button>
        <button class="app-btn-success">成功按钮</button>
        <button class="app-btn-danger">危险按钮</button>
        <button class="app-btn-warning">警告按钮</button>

        <button class="app-btn-block">块级按钮</button>
        <button class="app-btn-block app-btn-primary">块级按钮</button>
        <button class="app-btn-block app-btn-success">块级按钮</button>
        <button class="app-btn-block app-btn-danger">块级按钮</button>
        <button class="app-btn-block app-btn-warning">块级按钮</button>

        <div class="title">滚动条</div>
        <div class="app-scroll-content">
          <div class="app-scroll-item app-active">测试</div>
          <div class="app-scroll-item">测试</div>
          <div class="app-scroll-item">测试</div>
          <div class="app-scroll-item">测试</div>
          <div class="app-scroll-item">测试</div>
        </div>

        <div class="title">弹出层</div>
        <button onclick="openPop()">打开弹出层</button>

        <div class="title">遮罩层</div>
        <button onclick="openMask()">打开遮罩层</button>

        <div class="title">轮播图</div>
        <div class="app-carousel" id="myCarousel">
          <div class="carousel-item">
            <img src="images/0.jpg" alt="" />
          </div>
          <div class="carousel-item">
            <img src="images/0.jpg" alt="" />
          </div>
          <div class="carousel-item">
            <img src="images/0.jpg" alt="" />
          </div>
          <div class="carousel-indicators"></div>
        </div>

        <div class="title">提示框</div>
        <button id="showToastBtn">点击显示提示框</button>

        <div class="title">开关</div>
        <label class="app-switch">
          <input type="checkbox" checked />
          <span class="app-slider"></span>
        </label>

        <div class="title">复选框</div>
        <div class="app-checkbox-group">
          <input type="checkbox" id="newsletter" />
          <label for="newsletter">接收新闻邮件</label>
        </div>
        <div class="app-checkbox-group">
          <input type="checkbox" id="promotions" checked />
          <label for="promotions">接收促销信息</label>
        </div>

        <div class="title">单选框</div>
        <div class="app-radio-group">
          <input type="radio" name="gender" id="nan" />
          <label for="nan">男</label>
        </div>
        <div class="app-radio-group">
          <input type="radio" name="gender" id="nv" checked />
          <label for="nv">女</label>
        </div>

        <div class="title">徽章</div>
        <span class="app-badge app-badge-primary">主要徽章</span>
        <span class="app-badge app-badge-secondary">次要徽章</span>
        <span class="app-badge app-badge-warning">警告徽章</span>
        <span class="app-badge">默认徽章</span>

        <div class="title">数字角标</div>
        <div class="app-badge-wrapper">
          <span class="app-badge">通知</span>
          <span class="app-badge-number primary">5</span>
        </div>

        <div class="app-badge-wrapper" style="margin-top: 15px">
          <i class="app-icon app-envelope-icon"></i>
          <span class="app-badge-number success small">3</span>
        </div>

        <div class="app-list-item app-badge-wrapper">
          消息中心
          <span class="app-badge-number warning">12</span>
        </div>

        <div class="title">标签</div>
        <span class="app-tag">默认标签</span>
        <span class="app-tag app-tag-primary">主要标签</span>
        <span class="app-tag app-tag-secondary">次要标签</span>
        <span class="app-tag">Web</span>
        <span class="app-tag">Mobile</span>
        <span class="app-tag">UI/UX</span>

        <div class="title">进度条</div>
        <div class="app-progress">
          <div class="app-progress-bar" style="width: 50%"></div>
        </div>

        <div class="title">加载指示器</div>
        <div style="text-align: center">
          <div class="app-spinner"></div>
          <p>加载中，请稍候...</p>
        </div>

        <div class="title">列表</div>
        <div class="app-list">
          <div class="app-list-item">列表项1</div>
          <div class="app-list-item">列表项1</div>
          <div class="app-list-item">列表项1</div>
        </div>

        <div class="title">图文列表</div>
        <div class="app-list">
          <div class="app-list-item">
            <div class="app-left">
              <img src="./images/0.jpg" alt="" />
            </div>
            <div class="app-content">
              列表内容
              <p class="app-ellipsis">
                描述文本：技术开发京东客服进度款飞机抗打击开发机科技科
              </p>
            </div>
          </div>
        </div>

        <div class="title">卡片</div>
        <div class="app-card">
          <img src="images/0.jpg" alt="示例图片" class="app-card-img" />
          <div class="app-card-body">
            <h3 class="app-card-title">产品卡片</h3>
            <p class="app-card-text">
              这是一个产品描述卡片，可以展示商品信息、图片等内容。
            </p>
            <div class="mt-10">
              <span class="app-badge app-badge-primary">新品</span>
              <span class="app-badge app-badge-secondary">促销</span>
            </div>
          </div>
          <div class="app-card-footer">
            <span>¥199.00</span>
            <button class="app-btn app-btn-primary">购买</button>
          </div>
        </div>

        <div class="app-card">
          <div class="app-card-header">信息卡片</div>
          <div class="app-card-body">
            <h3 class="app-card-title">数据统计</h3>
            <p class="app-card-text">今日访问量: 1,240</p>
            <p class="app-card-text">用户增长率: 12.5%</p>
            <div class="app-progress">
              <div class="app-progress-bar" style="width: 65%"></div>
            </div>
          </div>
          <div class="app-card-footer">
            <button class="app-btn">查看详情</button>
          </div>
        </div>

       
      </div>
    </div>

    <div class="app-mask"></div>
    <div class="app-pop">
      <button onclick="closePop()">关闭弹出层</button>
      <div>内容</div>
    </div>

    <div class="app-bottom-bar">
      <div class="app-bottom-bar-item app-active">
        <div class="app-bottom-bar-icon">
          <i class="app-icon app-home-icon"></i>
        </div>
        <div class="app-bottom-bar-text">首页</div>
      </div>

      <div class="app-bottom-bar-item">
        <div class="app-bottom-bar-icon">
          <i class="app-icon app-user-icon"></i>
        </div>
        <div class="app-bottom-bar-text">用户</div>
      </div>
    </div>

    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
    <script>
      app.init();
      // 初始化滚动条
      app.scroll.init(document.querySelector(".app-scroll-content"));
      // 初始化轮播图
      app.carousel.init(document.getElementById("myCarousel"), {
        // 是否自动播放
        autoPlay: true,
        // 自动播放间隔时间
        interval: 2000,
        //循环播放
        loop: true,
      });
      // 打开弹出层
      function openPop() {
        app.pop.show();
      }
      // 关闭弹出层
      function closePop() {
        app.pop.hide();
      }

      function openMask() {
        app.mask.show();
      }
      function closeMask() {
        app.mask.hide();
      }

      document
        .querySelector(".app-mask")
        .addEventListener("maskChange", function (e) {
          console.log(e.detail.visible);
        });
      document
        .querySelector(".app-scroll-content")
        .addEventListener("scrollItemClick", function (e) {
          console.log(e.detail);
        });

      document
        .getElementById("showToastBtn")
        .addEventListener("tap", function () {
          app.toast("你好我是提示框");
        });

      document
        .querySelector(".app-switch")
        .addEventListener("switchChange", (e) => {
          console.log("当前开关状态:", e.detail.checked);
        });
    </script>
  </body>
</html>
